<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过模糊来弱化背景</title>
    <link rel="stylesheet" href="../public.css">
    <style>
        .box {
            width: 500px;
            margin: 20px auto;
        }
        main {
            transition: .6s filter;
        }
        main.de-emphasized {
            filter: blur(5px);
            /* filter: blur(3px) contrast(.8) brightness(.8); */
        }

      
    </style>
</head>

<body>
    <div class="content">
        <h1>通过滤镜模糊背景</h1>
        <div class="box">
            <main class="de-emphasized">Bacon Ipsum dolor sit amet...不过，这种方法的实现难度也更高。在滤镜效果（http://w3.org/TR/
                filter-effects）出现之前，它完全是不可能完成的任务；即使是在 blur() 滤
                镜出现之后，这个任务仍然是非常困难的。如果我们想对除了某个特定元素
                之外的一切应用模糊效果，那到底应该把滤镜应用到哪个元素上呢？如果把
                它应用到

                &lt;body> 元素上，页面中的所有元素都会被模糊处理，我们想要凸
                显出来的那个关键元素也不例外。这跟“毛玻璃效果”一节中的问题非常类
            </main>
            <dialog>
                O HAI, I'm a dialog. Click on me to dismiss.
            </dialog>
        </div>
    </div>
</body>

</html>